<template>
  <div>
    <router-view></router-view>
    <!-- 搜索 -->
    <van-search
      v-if="falge"
      shape="round"
      v-model="value"
      @search="onSearch"
      @cancel="onCancel"
      @click="searchClick"
      show-action
      placeholder="请输入搜索关键词"
      class="search"
    />
    <!-- 轮播图banner组件 -->
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      v-if="falge"
    >
      <van-swipe-item v-for="item in bannerArr" :key="item.id">
        <img :src="item.image_url" alt="" class="img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 导航图标组件 -->
    <Grid :channelArr="channelArr" v-if="falge" />
    <ProductList :goodsList="goodsList" v-if="falge" />
    <Top :arr="arr" v-if="falge" />
    <!-- 新品首发 newList -->
    <newList :data="newList" v-if="falge" />
    <!-- 专题精选 topicList -->
    <topicList :data="topicList" v-if="falge" />
    <!-- categoryList   -->
      <div v-if="falge">
        <CateGory
          v-for="(item, index) in categoryList"
          :key="index"
          :data="item"
        />
      </div>
    <!-- <CateGory :data="categoryList[0]" v-if="falge"/>
    <CateGory :data="categoryList[1]" v-if="falge"/>
    <CateGory :data="categoryList[2]" v-if="falge"/>
    <CateGory :data="categoryList[3]" v-if="falge"/> -->
  </div>
</template>

<script>

import { mapState, mapMutations } from "vuex";
import { getIndexList } from "../https/http";
import Grid from "../components/home/Grid.vue";
import ProductList from "../components/home/ProductList.vue";
import Top from "../components/home/Top.vue";
import newList from "../components/home/newList";
import topicList from "../components/home/topicList";
import CateGory from "../components/home/CateGory";

export default {
  name: "Home",
  data() {
    return {
      value: "",
      bannerArr: [],
      channelArr: [],
      goodsList: [],
      arr: [],
      newList: [],
      topicList: [],
      categoryList: [],
    };
  },
  methods: {
    // 回车触发
    onSearch() {
      console.log("按了回车键", "输入的值为" + this.value);
      this.$router.push({ name: "searchPopup", params: { value: this.value } });
    },
    // 左侧取消触发
    onCancel() {
      console.log("按了取消键");
    },
    searchClick() {
      this.chanGe();
      this.$router.push({ name: "searchPopup" });
    },
    ...mapMutations(["chanGe"]),
  },
  created() {
    
    // 获取首页相关数据
    getIndexList().then(
      (res) => {
        // console.log(123123,res);
        this.bannerArr = res.data.banner;
        this.channelArr = res.data.channel;
        this.goodsList = res.data.brandList;
        this.arr = res.data.hotGoodsList;
        this.newList = res.data.newGoodsList;
        this.topicList = res.data.topicList;
        this.categoryList = res.data.categoryList;
        // console.log(this.topicList);
      },
      (err) => {
        console.log(err);
      }
    );
  },
  components: {
    Grid,
    ProductList,
    Top,
    newList,
    topicList,
    CateGory,
  },
  computed: {
    ...mapState(["falge"]),
  },
};
</script>

<style scoped lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  margin-top: 54px;
  // background-color: #39a9ed;
}
.img {
  width: 100%;
  height: 100%;
}
.search {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 10;
}
</style>